import './user.css'
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import React, { useState } from 'react';
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from '@mui/material';
import GroupIcon from '@mui/icons-material/Group';
import {useNavigate, useParams} from "react-router-dom";
import {useDispatch, useSelector} from "react-redux";
import {deleteUser, editUser, logoutUser,} from "@page/store/reducers/user.js";
import {message} from "antd";

const User = ()=>{

    const [email, setEmail] = useState("");
    const [name, setName] = useState("");
    const [password,setPassword] = useState("123456");
    const [notifications, setNotifications] = useState(false);
    const [disturb, setDisturb] = useState(true);
    const [open, setOpen] = useState(false);
    const navigate = useNavigate();
    const {uname,mail,logo} = useSelector(state => state.user);
    const dispatch = useDispatch()
    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    const handleSave = async () => {
        // 收集所有相关数据
        const userData = {
            uname: name,
            mail: email,
            password: password,
            logo: avatar
        }
        console.log('保存个人信息：', userData)
        await dispatch(editUser(userData))
        handleClose();
    };

    const [avatar, setAvatar] = useState(null);

    const handleAvatarChange = (e) => {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onloadend = () => {
                setAvatar(reader.result);
            };
            reader.readAsDataURL(file);
        }
    };

    const handleLogout = () => {
        dispatch(logoutUser())
        navigate('/')
    }

    const handleDetele = () => {
        dispatch(deleteUser())
        navigate('/')
        message.success("账号已注销")
    }

    return (
        <div className="userSetting">
            <div className="userTop">
                <button className="backButton" onClick={()=>navigate(-1)}><ArrowBackIcon /></button>
                <span>用户设置</span>
            </div>

            <div>
                <div className="Option">
                    <hr/>
                        <div className="UserInfo">
                            <image className="userLogo"><GroupIcon/></image>
                            <div className="userDetails">
                                <span className="spanHead">用户名: {uname}</span>
                                <span className="spanHead">邮箱: {mail}</span>
                            </div>
                            <button variant="contained" color="primary" onClick={handleClickOpen}>编辑信息</button>
                            <Dialog classes="InfoEdit" open={open} onClose={handleClose}>
                                <DialogTitle>编辑个人信息</DialogTitle>
                                <DialogContent>
                                    <TextField
                                        autoFocus
                                        margin="dense"
                                        label="姓名"
                                        type="text"
                                        fullWidth
                                        variant="outlined"
                                        value={name}
                                        onChange={(e) => setName(e.target.value)}
                                    />
                                    <TextField
                                        margin="dense"
                                        label="邮箱"
                                        type="email"
                                        fullWidth
                                        variant="outlined"
                                        value={email}
                                        onChange={(e) => setEmail(e.target.value)}
                                    />
                                    <TextField
                                        margin="dense"
                                        label="新密码"
                                        type="password"
                                        fullWidth
                                        variant="outlined"
                                        value={password}
                                        onChange={(e) => setPassword(e.target.value)}
                                    />
                                    <input
                                        accept="image/*"
                                        style={{ display: 'none' }}
                                        id="contained-button-file"
                                        multiple
                                        type="file"
                                        onChange={handleAvatarChange}
                                    />
                                    <label htmlFor="contained-button-file">
                                        <Button variant="contained" component="span">
                                            上传头像
                                        </Button>
                                    </label>
                                </DialogContent>
                                <DialogActions>
                                    <Button onClick={handleClose} color="secondary">
                                        退出
                                    </Button>
                                    <Button onClick={handleSave} color="primary">
                                        保存
                                    </Button>
                                </DialogActions>
                            </Dialog>
                        </div>
                </div>
                <div className="Option">
                    <h3>
                        消息设置
                    </h3>
                    <hr/>
                        <div className="Inform">
                            <div className="messageOption">
                                <span className="spanHead">消息免打扰</span>
                                <label className="switch">
                                    <input type="checkbox" checked={notifications}
                                           onChange={() => setNotifications(!notifications)}/>
                                    <span className="slider round"></span>
                                </label>
                            </div>
                            <div className="messageOption">
                                <span className="spanHead">消息通知</span>
                                <label className="switch">
                                    <input type="checkbox" checked={disturb} onChange={() => setDisturb(!disturb)}/>
                                    <span className="slider round"></span>
                                </label>
                            </div>
                        </div>
                </div>
                <div className="Option">
                    <h3>
                        文件管理
                    </h3>
                    <hr/>
                        <div className="Inform">
                            <div className="fileOption">
                                <span className="spanHead">设置文件保存时间</span>
                            </div>
                            <div className="fileOption">
                                <span className="spanHead">清理缓存文件</span>
                            </div>
                        </div>
                </div>
                <div className="Option">
                    <h3>
                        联系我们
                    </h3>
                    <hr/>
                        <div className="Inform">
                            <div className="spanTip">
                                <span className="spanHead">常见问题</span>
                            </div>
                            <div className="spanTip">
                                <span className="spanHead">反馈与建议</span>
                            </div>
                        </div>
                </div>
                <div className="Option">
                    <button className="hover1" onClick={handleDetele}>注销账号</button>
                    <button className="hover2" onClick={handleLogout}>退出登录</button>
                </div>
            </div>
        </div>

    )
}



export default User;
